const Section = (props) => {
    let bgstyle = props.img ? {
        "position": "relative",
        "background-image": "url(" + props.img + ")",
        "background-attachment": props.fixed ? "fixed" : "scroll",
        "background-repeat": props.repeat,
        "background-position": props.pos,
        "background-size": props.size,
        "align-content": "center",
    } : { "position": "relative" }
    if (props.height) {
        bgstyle.height = props.height
    }

    let maskstyle = {
        "position": "absolute",
        "top": 0,
        "left": 0,
        "right": 0,
        "bottom": 0,
        "background": "rgba(" + props.rgba + ")"
    }
    console.log(maskstyle)
    return props.section ? (
        <section className={props.className} style={bgstyle}>
            {props.rgba ? <div style={maskstyle}></div> : ""}
            <div className={props.inClass} style={{ "position": "relative" }}>
                {props.children}
            </div>
        </section>
    ) : (
        <div className={props.className} style={bgstyle}>
            {props.rgba ? <div style={maskstyle}></div> : ""}
            <div className={props.inClass} style={{ "position": "relative" }}>
                {props.children}
            </div>
        </div>
    )
};

Section.defaultProps = {
    img: "",
    repeat: "no-repeat", //repeat-x|repeat-y|repeat|no-repeat
    fixed: false, // false|true
    pos: "center center",
    size: "cover", //cover|contain|x(,y)|x%(,y%)
    height: false,
    rgba: "",
    className: "",
    inClass: "container-lg",
    section: true
}
export default Section
